<template>
  <!-- 最上面的大盒子 -->
  <div class="top_">
    <!-- 左边的图片 -->
    <img src="../../assets/logo.png" alt="cw" class="img1">
    <!-- 搜索框 -->
    <input type="text" placeholder="搜索车票、餐饮、常旅客、相关规章" class="input1">
    <div class="wz">
      <div class="wz1">夜间模式</div>
      <div class="wz2">|</div>
      <div class="wz1">敬老版</div>
      <div class="wz2">|</div>
      <div class="wz1">简体中文</div>
      <div class="wz2">|</div>
      <div class="smallbox" v-if="channel.isLogin === false">
        <span class="wz1" style="color: #333333; cursor: pointer;" @click="$router.push('/')">登录</span>
        <span class="wz1" style="color: #333333; cursor: pointer;" @click="$router.push('/register')">注册</span>
      </div>
      <div v-if="channel.isLogin === true" class="smallbox">
        <el-button type="primary" @click="btn">退出登录</el-button>
      </div>
    </div>
  </div>
  <!-- navigation的意思是导航，表示中间的导航栏 -->
  <div class="navigation_">
    <div style="width: 1200px; height: 100%;display: flex;">
      <div class="nav1">
        <router-link to="/">首页</router-link>
      </div>
      <div class="nav1" @click="channel.getList();">
        <router-link to="/ticket">全部车票</router-link>
      </div>
      <div class="nav1" @click="$router.push('/select') ,channel.selecttrain();">
        <router-link to="/select">查询车票</router-link>
      </div>
      <div class="nav1">
        <router-link to="/client">客户管理</router-link>
      </div>
      <div class="nav1">
        <router-link to="/trips">车次管理</router-link>
      </div>
      <div class="nav1">
        <router-link to="/system">系统管理</router-link>
      </div>
      <div class="nav1" @click=" channel.selectorder(channel.logininfoid)">
        <router-link to="/buy">订单详细</router-link>
      </div>
      <div class="nav1">
        <router-link to="/information">个人中心</router-link>
      </div>
    </div>

  </div>
  <!-- 中间的大图片的盒子 -->
  <!-- <div class="bigimage_"> -->
  <!-- 登录界面 -->
  <!-- <div class="login"> -->

  <!-- </div> -->
  <!-- 大图片 -->
  <!-- <el-carousel height="auto" indicator-position="none" arrow="never">
    <el-carousel-item style="height: 450px">
      <img src="../assets/banner1.png" alt="cw" class="img2">
    </el-carousel-item>

    <el-carousel-item style="height: 450px">
      <img src="../assets/banner2.png" alt="cw" class="img2">
    </el-carousel-item>
  </el-carousel>
</div> -->
  <!-- 下面的菜单栏 -->
  <!-- <div class="menu_"> -->

  <!-- </div> -->

  <!-- 四个盒子 -->
  <!-- <div class="fourbox_"></div> -->
</template>

<script setup>
import {useCounterStore} from '../../stores/counter'
import {useRouter} from 'vue-router';

const channel = useCounterStore()
// import MyLogin from '../components/MyLogin.vue';
//路由跳转
const router = useRouter();
//btn
const btn = () => {
  channel.isLogin = false
  channel.logininfoid = ''
  router.push('/')

}
</script>


<style lang="css" scoped>
.smallbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wz1 {
  padding: 10px;
  font-size: 13px;
  color: #3b99fc;
}

.wz1:hover {
  color: #2676e3;
  text-decoration: underline;
}

.wz2 {
  padding: 10px;
  font-size: 13px;
  color: #3b99fc;
}

.wz {
  display: flex;
  cursor: pointer;
}

.top_ {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.img1 {
  width: 280px;
  height: 100%;
}

.input1 {
  width: 330px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 14px;
}

.navigation_ {
  background-color: #3b99fc;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation_ .nav1 a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.navigation_ .nav1 a.router-link-active {

  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  background-color: #2676e3;

}

.nav1 {
  flex: 1;
  height: 100%;
  font-size: 14px;
  color: #fff;

  text-align: center;
  line-height: 45px;
  cursor: pointer;
}

.nav1:hover {
  background-color: #2676e3;
  color: #fff;
}


</style>